<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 用户会员管理</title>
    <link href="./js/bootstrap.min.css" rel="stylesheet">
    <link href="./js/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8fafc;
        }

        /* 顶部导航栏 */
        .top-nav {
            height: 60px;
            background-color: #2563eb;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .logo {
            font-size: 20px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        /* 主体布局 */
        .main-container {
            display: flex;
            margin-top: 60px;
            height: calc(100vh - 60px);
        }

        /* 左侧菜单栏 */
        .sidebar {
            width: 220px;
            background-color: #1e293b;
            color: white;
            height: 100%;
            position: fixed;
            overflow-y: auto;
            transition: all 0.3s;
            z-index: 900;
        }

        .sidebar.collapsed {
            width: 80px;
        }

        .menu-toggle {
            padding: 15px 20px;
            cursor: pointer;
            border-bottom: 1px solid #334155;
        }

        .menu-items {
            padding: 10px 0;
        }

        .menu-item {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background 0.2s;
            position: relative;
        }

        .menu-item:hover {
            background-color: #334155;
        }

        .menu-item.active {
            background-color: #2563eb;
        }

        .menu-text {
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar.collapsed .menu-text {
            display: none;
        }

        .sidebar.collapsed .menu-item {
            justify-content: center;
        }

        .submenu {
            padding-left: 40px;
            background-color: #0f172a;
        }

        .submenu-item {
            padding: 8px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .submenu-item:hover {
            background-color: #1e293b;
        }

        .submenu-item.active {
            background-color: #2563eb;
        }

        /* 内容区 */
        .content {
            flex: 1;
            margin-left: 220px;
            padding: 20px;
            transition: margin-left 0.3s;
        }

        .sidebar.collapsed ~ .content {
            margin-left: 80px;
        }

        /* 面包屑导航 */
        .breadcrumb-nav {
            margin-bottom: 20px;
        }

        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        th {
            background-color: #f1f5f9;
            font-weight: 600;
            color: #1e293b;
        }

        tr:hover {
            background-color: #f8fafc;
        }

        /* 按钮样式 */
        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            border: none;
            margin: 2px;
        }

        .btn-primary {
            background-color: #2563eb;
            color: white;
        }

        .btn-success {
            background-color: #10b981;
            color: white;
        }

        .btn-warning {
            background-color: #f59e0b;
            color: white;
        }

        .btn-danger {
            background-color: #ef4444;
            color: white;
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid #cbd5e1;
            color: #64748b;
        }

        .btn-sm {
            padding: 4px 8px;
            font-size: 11px;
        }

        .btn-disabled {
            background-color: #cbd5e1;
            color: #64748b;
            cursor: not-allowed;
        }

        /* 筛选器 */
        .filter-row {
            display: flex;
            gap: 15px;
            align-items: end;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .filter-item {
            flex: 1;
            min-width: 150px;
        }

        .filter-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .filter-item input,
        .filter-item select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
        }

        .filter-actions {
            display: flex;
            gap: 10px;
            align-items: end;
        }

        /* 批量操作区 */
        .batch-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        /* 会员状态标签 */
        .member-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-active {
            background-color: #dcfce7;
            color: #166534;
        }

        .status-expiring {
            background-color: #fef3c7;
            color: #92400e;
        }

        .status-expired {
            background-color: #fee2e2;
            color: #991b1b;
        }

        .status-non-member {
            background-color: #f1f5f9;
            color: #64748b;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .dot-active {
            background-color: #10b981;
        }

        .dot-expiring {
            background-color: #f59e0b;
        }

        .dot-expired {
            background-color: #ef4444;
        }

        .dot-non-member {
            background-color: #94a3b8;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        .page-item {
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            cursor: pointer;
        }

        .page-item.active {
            background-color: #2563eb;
            color: white;
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 8px;
            width: 600px;
            max-width: 90%;
            max-height: 90%;
            overflow-y: auto;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .close {
            font-size: 24px;
            cursor: pointer;
        }

        /* 详情页样式 */
        .detail-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .detail-cards {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .detail-card {
            flex: 1;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

        .user-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .info-item {
            margin-bottom: 8px;
        }

        .info-label {
            color: #64748b;
            font-size: 14px;
        }

        .info-value {
            color: #1e293b;
            font-weight: 500;
        }

        /* 标签页 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
        }

        .tab.active {
            border-bottom: 3px solid #2563eb;
            color: #2563eb;
            font-weight: 500;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .detail-cards {
                flex-direction: column;
            }
            
            .user-info-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="logo">管理系统</div>
        <div class="user-info">
            <div class="notification-icon">🔔 通知中心</div>
            <div class="user-dropdown">
                <span>张经理 ▼</span>
            </div>
        </div>
    </div>

    <!-- 主体布局 -->
    <div class="main-container">
       <!-- 左侧菜单栏 -->
       <div class="sidebar" id="sidebar">
        <div class="menu-toggle" onclick="toggleSidebar()">☰ 菜单</div>
        <div class="menu-items">
            <div class="menu-item">
                <a href="./index.html">
                    <span>📊</span>
                    <span class="menu-text">仪表盘</span>
                </a>
              
            </div>
            <div class="menu-item">
                <a href="./dianpu.html">
                    <span>🏪</span>
                    <span class="menu-text">店铺管理</span>
                </a>
               
            </div>
            <div class="menu-item">
                <a href="./jiqiren.html">
                    <span>🤖</span>
                    <span class="menu-text">机器人管理</span>
                </a>
             
            </div>
            <div class="menu-item">
                <a href="./order.html">
                    <span>📋</span>
                    <span class="menu-text">订单管理</span>
                </a>
               
            </div>
            <div class="menu-item active">
                <span>👥</span>
                <span class="menu-text">用户会员管理</span>
                <span>▶</span>
            </div>
            <div class="submenu">
                <div class="submenu-item active">
                    <a href="./user.html">
                        <span>├─</span>
                        <span class="menu-text">用户会员列表</span>
                    </a>
                  
                </div>
                <div class="submenu-item ">
                    <a href="./vip.html">
                        <span>├─</span>
                        <span class="menu-text">会员等级配置</span>
                    </a>
                    
                </div>
            </div>
            <div class="menu-item ">
                <a href="./fuwu.html">
                    <span>🎯</span>
                    <span class="menu-text">服务套餐类型</span>
                </a>
            </div>
            <div class="menu-item">
                <span>🎯</span>
                <span class="menu-text">促销管理(二期)</span>
            </div>
            <div class="menu-item">
                <span>📈</span>
                <span class="menu-text">数据统计(二期)</span>
            </div>
            <div class="menu-item">
                <span>⚙️</span>
                <span class="menu-text">系统设置</span>
            </div>
        </div>
    </div>

        <!-- 中间内容区 -->
        <div class="content">
            <!-- 用户会员列表页 -->
            <div id="userListPage">
                <!-- 面包屑导航 -->
                <div class="breadcrumb-nav">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">首页</li>
                            <li class="breadcrumb-item">用户会员管理</li>
                            <li class="breadcrumb-item active">用户会员列表</li>
                        </ol>
                    </nav>
                </div>

                <!-- 筛选器 -->
                <div class="card">
                    <div class="card-title">筛选条件</div>
                    <div class="filter-row">
                        <div class="filter-item">
                            <label>用户状态</label>
                            <select>
                                <option value="">全部</option>
                                <option value="正常">正常</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>会员状态</label>
                            <select>
                                <option value="">全部</option>
                                <option value="非会员">非会员</option>
                                <option value="VIP1">VIP1</option>
                                <option value="VIP2">VIP2</option>
                                <option value="VIP3">VIP3</option>
                                <option value="即将过期">即将过期</option>
                                <option value="已过期">已过期</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>注册时间</label>
                            <div style="display: flex; gap: 10px; align-items: center;">
                                <input type="date">
                                <span>至</span>
                                <input type="date">
                            </div>
                        </div>
                        <div class="filter-item">
                            <label>手机号/昵称</label>
                            <input type="text" placeholder="请输入手机号或昵称">
                        </div>
                        <div class="filter-actions">
                            <button class="btn btn-primary">🔍 搜索</button>
                            <button class="btn btn-outline">🗑️ 重置</button>
                        </div>
                    </div>
                </div>

                <!-- 批量操作区 -->
                <div class="batch-actions">
                    <label><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"> 全选</label>
                    <button class="btn btn-outline" onclick="exportData()">
                        <i class="bi bi-download"></i> 导出数据
                    </button>
                    <button class="btn btn-disabled" id="batchDisableBtn" onclick="batchDisable()">
                        <i class="bi bi-exclamation-triangle"></i> 批量禁用
                    </button>
                    <button class="btn btn-disabled" id="batchGiftBtn" onclick="showGiftModal()">
                        <i class="bi bi-gift"></i> 批量赠送权益
                    </button>
                    <button class="btn btn-disabled" id="batchLevelBtn">
                        <i class="bi bi-arrow-repeat"></i> 批量修改会员等级 ▼
                    </button>
                </div>

                <!-- 用户会员表格 -->
                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th><input type="checkbox" onchange="toggleSelectAll()"></th>
                                    <th>用户ID</th>
                                    <th>用户信息</th>
                                    <th>注册信息</th>
                                    <th>会员状态</th>
                                    <th>消费概览</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox" class="user-checkbox" onchange="updateBatchButtons()"></td>
                                    <td>U001</td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <img src="https://placehold.co/40x40" alt="头像" style="border-radius: 50%;">
                                            <div>
                                                <div>李**</div>
                                                <div>138****8888</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>2024-05-10</div>
                                        <div>来源：小程序</div>
                                    </td>
                                    <td>
                                        <div class="member-status status-active">
                                            <span class="status-dot dot-active"></span>
                                            VIP2（年付）
                                        </div>
                                        <div>有效期至2025-05-10</div>
                                        <div>自动续费：开启</div>
                                    </td>
                                    <td>
                                        <div>累计：1280元</div>
                                        <div>本月：2次</div>
                                    </td>
                                    <td>
                                        <button class="btn btn-outline btn-sm" onclick="showUserDetail('U001')">👁️ 详情</button>
                                        <button class="btn btn-outline btn-sm" onclick="editMember('U001')">✏️ 编辑会员</button>
                                        <button class="btn btn-warning btn-sm">⚠️ 禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="user-checkbox" onchange="updateBatchButtons()"></td>
                                    <td>U002</td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <img src="https://placehold.co/40x40" alt="头像" style="border-radius: 50%;">
                                            <div>
                                                <div>王**</div>
                                                <div>139****9999</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>2024-06-15</div>
                                        <div>来源：门店推荐</div>
                                    </td>
                                    <td>
                                        <div class="member-status status-expiring">
                                            <span class="status-dot dot-expiring"></span>
                                            VIP1（月付）
                                        </div>
                                        <div>有效期至2024-10-15</div>
                                        <div>自动续费：关闭（即将到期）</div>
                                    </td>
                                    <td>
                                        <div>累计：560元</div>
                                        <div>本月：1次</div>
                                    </td>
                                    <td>
                                        <button class="btn btn-outline btn-sm" onclick="showUserDetail('U002')">👁️ 详情</button>
                                        <button class="btn btn-outline btn-sm" onclick="editMember('U002')">✏️ 编辑会员</button>
                                        <button class="btn btn-warning btn-sm">⚠️ 禁用</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="user-checkbox" onchange="updateBatchButtons()"></td>
                                    <td>U003</td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <img src="https://placehold.co/40x40" alt="头像" style="border-radius: 50%;">
                                            <div>
                                                <div>张**</div>
                                                <div>137****7777</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>2024-07-20</div>
                                        <div>来源：活动推广</div>
                                    </td>
                                    <td>
                                        <div class="member-status status-non-member">
                                            <span class="status-dot dot-non-member"></span>
                                            非会员
                                        </div>
                                        <div>-</div>
                                        <div>-</div>
                                    </td>
                                    <td>
                                        <div>累计：198元</div>
                                        <div>本月：0次</div>
                                    </td>
                                    <td>
                                        <button class="btn btn-outline btn-sm" onclick="showUserDetail('U003')">👁️ 详情</button>
                                        <button class="btn btn-success btn-sm" onclick="openMember('U003')">✏️ 开通会员</button>
                                        <button class="btn btn-warning btn-sm">⚠️ 禁用</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <button class="page-item">上一页</button>
                    <button class="page-item active">1</button>
                    <button class="page-item">2</button>
                    <button class="page-item">3</button>
                    <span>...</span>
                    <button class="page-item">15</button>
                    <button class="page-item">下一页</button>
                    <div style="display: flex; align-items: center; gap: 10px; margin-left: 20px;">
                        <span>跳至第</span>
                        <input type="number" style="width: 60px; padding: 5px;" min="1" max="15">
                        <span>页</span>
                        <button class="btn btn-outline">确定</button>
                        <span>每页显示：20条 ▼</span>
                    </div>
                </div>
            </div>

            <!-- 用户会员详情页 -->
            <div id="userDetailPage" style="display: none;">
                <!-- 页面标题与返回 -->
                <div class="detail-header">
                    <button class="btn btn-outline" onclick="showUserList()">
                        <i class="bi bi-arrow-left"></i> 返回列表
                    </button>
                    <h4>用户会员详情（用户ID：U001）</h4>
                </div>

                <!-- 基础信息和会员信息卡片 -->
                <div class="detail-cards">
                    <!-- 基础信息卡片 -->
                    <div class="detail-card">
                        <div class="card-header">
                            <h5>基础信息（不可编辑）</h5>
                        </div>
                        <div style="display: flex; align-items: flex-start; gap: 20px;">
                            <img src="https://placehold.co/80x80" alt="用户头像" class="user-avatar">
                            <div class="user-info-grid">
                                <div class="info-item">
                                    <div class="info-label">用户ID</div>
                                    <div class="info-value">U001</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">手机号</div>
                                    <div class="info-value">138****8888 <span style="cursor: pointer;">👁️</span></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">性别</div>
                                    <div class="info-value">男</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">注册时间</div>
                                    <div class="info-value">2024-05-10 14:30</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">注册来源</div>
                                    <div class="info-value">微信小程序</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">最后登录</div>
                                    <div class="info-value">2024-10-05 09:15</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">账号状态</div>
                                    <div class="info-value">
                                        <span class="member-status status-active">
                                            <span class="status-dot dot-active"></span> 正常
                                        </span>
                                    </div>
                                </div>
                                <!-- <div class="info-item">
                                    <div class="info-label">标签</div>
                                    <div class="info-value">高频用户、门店常客</div>
                                </div> -->
                            </div>
                        </div>
                    </div>

                    <!-- 会员信息卡片 -->
                    <div class="detail-card">
                        <div class="card-header">
                            <h5>会员信息</h5>
                            <button class="btn btn-outline btn-sm" id="editMemberBtn" onclick="toggleEditMember()">
                                <i class="bi bi-pencil"></i> 编辑
                            </button>
                        </div>
                        <div class="user-info-grid">
                            <div class="info-item">
                                <div class="info-label">会员等级</div>
                                <div class="info-value" id="memberLevelValue">🥈 VIP2（黄金会员）</div>
                                <select id="memberLevelSelect" style="display: none; width: 100%; margin-top: 5px;">
                                    <option value="VIP1">🥉 VIP1（青铜会员）</option>
                                    <option value="VIP2" selected>🥈 VIP2（黄金会员）</option>
                                    <option value="VIP3">🥇 VIP3（钻石会员）</option>
                                </select>
                            </div>
                            <div class="info-item">
                                <div class="info-label">开通方式</div>
                                <div class="info-value">自主开通（2024-05-10）</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">有效期</div>
                                <div class="info-value">2024-05-10 至 2025-05-10（剩余218天）</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">自动续费</div>
                                <div class="info-value" id="autoRenewValue">
                                    <span class="member-status status-active">
                                        <span class="status-dot dot-active"></span> 已开启
                                    </span>
                                    （续费周期：1年，续费金额：299元）
                                </div>
                                <div id="autoRenewSwitch" style="display: none; margin-top: 5px;">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="info-item" style="grid-column: 1 / -1;">
                                <div class="info-label">当前权益</div>
                                <div class="info-value">
                                    ① 服务9折  ② 每月1次免费头皮检测（本月剩余1次）  ③ 优先预约权
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px; display: none;" id="editButtons">
                            <button class="btn btn-primary" onclick="saveMemberInfo()">保存</button>
                            <button class="btn btn-outline" onclick="cancelEditMember()">取消</button>
                        </div>
                       <!--  <div style="margin-top: 20px;">
                            <button class="btn btn-outline" onclick="showGiftModal()">
                                <i class="bi bi-gift"></i> 手动赠送权益
                            </button>
                            <button class="btn btn-outline" onclick="showRenewModal()">
                                <i class="bi bi-arrow-repeat"></i> 立即续费
                            </button>
                        </div> -->
                    </div>
                </div>

                <!-- 标签页区域 -->
                <div class="card">
                    <div class="tabs">
                        <div class="tab active" onclick="switchTab('benefits')">📜 权益记录</div>
                        <div class="tab" onclick="switchTab('orders')">🛒 消费记录</div>
                        <div class="tab" onclick="switchTab('appointments')">📅 预约记录</div>
                        <!-- <div class="tab" onclick="switchTab('logs')">📝 操作日志</div> -->
                    </div>

                    <!-- 权益记录表格 -->
                    <div id="benefitsTab">
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>权益类型</th>
                                        <th>权益名称</th>
                                        <th>获取方式</th>
                                        <th>生效时间</th>
                                        <th>失效时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>折扣类</td>
                                        <td>服务9折</td>
                                        <td>等级自带</td>
                                        <td>2024-05-10</td>
                                        <td>2025-05-10</td>
                                        <td><span class="badge bg-success">生效中</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">查看详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>服务类</td>
                                        <td>免费头皮检测</td>
                                        <td>等级自带</td>
                                        <td>2024-05-10</td>
                                        <td>2025-05-10</td>
                                        <td><span class="badge bg-success">生效中</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">查看详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="7">
                                            <div style="padding: 10px; background: #f8fafc; border-radius: 4px;">
                                                使用记录：2024-09-01 朝阳店使用1次，本月剩余1次
                                            </div>
                                        </td>
                                    </tr>
                                   <!--  <tr>
                                        <td>优惠券类</td>
                                        <td>50元续费券</td>
                                        <td>手动赠送</td>
                                        <td>2024-10-01</td>
                                        <td>2024-10-31</td>
                                        <td><span class="badge bg-secondary">未使用</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">查看详情</button>
                                            <button class="btn btn-danger btn-sm">作废</button>
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 消费记录表格（默认隐藏） -->
                    <div id="ordersTab" style="display: none;">
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>订单号</th>
                                        <th>消费时间</th>
                                        <th>金额</th>
                                        <th>支付方式</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>24100501</td>
                                        <td>2024-10-05 14:30</td>
                                        <td>58元</td>
                                        <td>微信支付</td>
                                        <td><span class="badge bg-success">已核销</span></td>
                                    </tr>
                                    <tr>
                                        <td>24090105</td>
                                        <td>2024-09-01 15:20</td>
                                        <td>88元</td>
                                        <td>支付宝</td>
                                        <td><span class="badge bg-success">已核销</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 其他标签页内容可继续添加 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 赠送权益弹窗 -->
    <div class="modal" id="giftModal">
        <div class="modal-content">
            <div class="modal-header">
                <h5>手动赠送权益</h5>
                <span class="close" onclick="closeGiftModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择权益（可多选）</label>
                    <div>
                        <label style="display: block; margin: 10px 0;">
                            <input type="checkbox"> 50元续费券
                        </label>
                        <label style="display: block; margin: 10px 0;">
                            <input type="checkbox"> 1次免费洗头
                        </label>
                        <label style="display: block; margin: 10px 0;">
                            <input type="checkbox"> 1次免费头皮检测
                        </label>
                        <label style="display: block; margin: 10px 0;">
                            <input type="checkbox"> 服务95折券
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>生效时间</label>
                    <input type="date" style="width: 100%;">
                </div>
                <div class="form-group">
                    <label>备注</label>
                    <textarea rows="3" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeGiftModal()">取消</button>
                <button class="btn btn-primary" onclick="submitGift()">确定赠送</button>
            </div>
        </div>
    </div>

    <!-- 续费弹窗 -->
    <div class="modal" id="renewModal">
        <div class="modal-content">
            <div class="modal-header">
                <h5>续费套餐选择</h5>
                <span class="close" onclick="closeRenewModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择续费套餐</label>
                    <div style="border: 1px solid #e2e8f0; border-radius: 4px; padding: 15px; margin: 10px 0;">
                        <label style="display: block; margin: 10px 0;">
                            <input type="radio" name="renewPackage" checked> VIP2 年付 299元
                        </label>
                        <label style="display: block; margin: 10px 0;">
                            <input type="radio" name="renewPackage"> VIP2 季付 89元
                        </label>
                        <label style="display: block; margin: 10px 0;">
                            <input type="radio" name="renewPackage"> VIP2 月付 39元
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>支付方式</label>
                    <select style="width: 100%;">
                        <option>后台代付</option>
                        <option>发送支付链接给用户</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeRenewModal()">取消</button>
                <button class="btn btn-primary" onclick="submitRenew()">确定续费</button>
            </div>
        </div>
    </div>

    <script>
        // 切换侧边栏
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        }

        // 显示用户详情
        function showUserDetail(userId) {
            document.getElementById('userListPage').style.display = 'none';
            document.getElementById('userDetailPage').style.display = 'block';
        }

        // 返回用户列表
        function showUserList() {
            document.getElementById('userDetailPage').style.display = 'none';
            document.getElementById('userListPage').style.display = 'block';
        }

        // 编辑会员信息
        function editMember(userId) {
            alert(`编辑会员 ${userId}`);
        }

        // 开通会员
        function openMember(userId) {
            alert(`为用户 ${userId} 开通会员`);
        }

        // 全选/取消全选
        function toggleSelectAll() {
            const checkboxes = document.querySelectorAll('.user-checkbox');
            const selectAll = document.getElementById('selectAll');
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
            updateBatchButtons();
        }

        // 更新批量操作按钮状态
        function updateBatchButtons() {
            const checkedCount = document.querySelectorAll('.user-checkbox:checked').length;
            const disableBtn = document.getElementById('batchDisableBtn');
            const giftBtn = document.getElementById('batchGiftBtn');
            
            if (checkedCount > 0) {
                disableBtn.className = 'btn btn-warning';
                giftBtn.className = 'btn btn-outline';
            } else {
                disableBtn.className = 'btn btn-disabled';
                giftBtn.className = 'btn btn-disabled';
            }
        }

        // 批量禁用
        function batchDisable() {
            const checkedCount = document.querySelectorAll('.user-checkbox:checked').length;
            if (checkedCount > 0) {
                if (confirm(`确定要禁用选中的 ${checkedCount} 个用户吗？`)) {
                    alert('批量禁用成功');
                }
            }
        }

        // 导出数据
        function exportData() {
            alert('导出数据功能');
        }

        // 显示赠送权益弹窗
        function showGiftModal() {
            document.getElementById('giftModal').classList.add('show');
        }

        // 关闭赠送权益弹窗
        function closeGiftModal() {
            document.getElementById('giftModal').classList.remove('show');
        }

        // 提交赠送权益
        function submitGift() {
            alert('权益赠送成功');
            closeGiftModal();
        }

        // 显示续费弹窗
        function showRenewModal() {
            document.getElementById('renewModal').classList.add('show');
        }

        // 关闭续费弹窗
        function closeRenewModal() {
            document.getElementById('renewModal').classList.remove('show');
        }

        // 提交续费
        function submitRenew() {
            alert('续费订单已生成');
            closeRenewModal();
        }

        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有标签页内容
            document.getElementById('benefitsTab').style.display = 'none';
            document.getElementById('ordersTab').style.display = 'none';
            
            // 显示选中的标签页
            if (tabName === 'benefits') {
                document.getElementById('benefitsTab').style.display = 'block';
            } else if (tabName === 'orders') {
                document.getElementById('ordersTab').style.display = 'block';
            }
            
            // 更新标签页激活状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        // 切换会员信息编辑状态
        function toggleEditMember() {
            const isEditing = document.getElementById('memberLevelSelect').style.display !== 'none';
            
            if (isEditing) {
                // 取消编辑
                document.getElementById('memberLevelValue').style.display = 'block';
                document.getElementById('memberLevelSelect').style.display = 'none';
                document.getElementById('autoRenewValue').style.display = 'block';
                document.getElementById('autoRenewSwitch').style.display = 'none';
                document.getElementById('editButtons').style.display = 'none';
                document.getElementById('editMemberBtn').innerHTML = '<i class="bi bi-pencil"></i> 编辑';
            } else {
                // 开始编辑
                document.getElementById('memberLevelValue').style.display = 'none';
                document.getElementById('memberLevelSelect').style.display = 'block';
                document.getElementById('autoRenewValue').style.display = 'none';
                document.getElementById('autoRenewSwitch').style.display = 'block';
                document.getElementById('editButtons').style.display = 'block';
                document.getElementById('editMemberBtn').innerHTML = '<i class="bi bi-x"></i> 取消';
            }
        }

        // 保存会员信息
        function saveMemberInfo() {
            alert('会员信息已保存');
            toggleEditMember(); // 切换回查看状态
        }

        // 取消编辑会员信息
        function cancelEditMember() {
            toggleEditMember(); // 切换回查看状态
        }

        // 菜单点击事件
        document.querySelectorAll('.menu-item, .submenu-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.menu-item, .submenu-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>